<template>
  <div>
    <el-form :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()"
      @submit.native.prevent>
      <!-- 搜索框-->
      <el-form-item prop="retain">
        <el-select v-model="searchForm.retain" placeholder="请选择" size="small" style="width: 100%;">
          <el-option v-for="item in tongjiRetain" :key="item.value" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="queryDate">
        <el-date-picker v-model="searchForm.queryDate" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="period">
        <el-select v-model="searchForm.period" placeholder="请选择" size="small" style="width: 100%;">
          <el-option v-for="item in $dictUtils.getDictList('tongji_period')" :key="item.value" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="query()" size="small" :loading="loading">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <table cellspacing="0" class="table">
          <thead class="thead">
            <tr>
              <th class="table_cell th">时间</th>
              <th class="table_cell th">{{searchForm.retain ==='newly'?'新增用户数':'活跃用户数'}}</th>
              <th class="table_cell th">1天后</th>
              <th class="table_cell th">2天后</th>
              <th class="table_cell th">3天后</th>
              <th class="table_cell th">4天后</th>
              <th class="table_cell th">5天后</th>
              <th class="table_cell th">6天后</th>
              <th class="table_cell th">7天后</th>
              <th class="table_cell th">14天后</th>
              <th class="table_cell th">30天后</th>
            </tr>
          </thead>
          <tbody class="tbody">
            <tr v-for="row in chartData" :key="row.refDate">
              <td class="table_cell th">{{row.refDate}}</td>
              <template v-if="searchForm.retain ==='newly'">
                <td class="table_cell th">{{row.visitUvNew["0"]}}</td>
                <td class="table_cell th" :style="{backgroundColor: getBackColor(row.visitUvNew['1'])}">{{row.visitUvNew["1"]}}</td>
                <td class="table_cell th" :style="{backgroundColor: getBackColor(row.visitUvNew['2'])}">{{row.visitUvNew["2"]}}</td>
                <td class="table_cell th" :style="{backgroundColor: getBackColor(row.visitUvNew['3'])}">{{row.visitUvNew["3"]}}</td>
                <td class="table_cell th" :style="{backgroundColor: getBackColor(row.visitUvNew['4'])}">{{row.visitUvNew["4"]}}</td>
                <td class="table_cell th" :style="{backgroundColor: getBackColor(row.visitUvNew['5'])}">{{row.visitUvNew["5"]}}</td>
                <td class="table_cell th" :style="{backgroundColor: getBackColor(row.visitUvNew['6'])}">{{row.visitUvNew["6"]}}</td>
                <td class="table_cell th" :style="{backgroundColor: getBackColor(row.visitUvNew['7'])}">{{row.visitUvNew["7"]}}</td>
                <td class="table_cell th" :style="{backgroundColor: getBackColor(row.visitUvNew['14'])}">{{row.visitUvNew["14"]}}</td>
                <td class="table_cell th" :style="{backgroundColor: getBackColor(row.visitUvNew['30'])}">{{row.visitUvNew["30"]}}</td>
              </template>
              <template v-else>
                <td class="table_cell th">{{row.visitUv["0"]}}</td>
                <td class="table_cell th" :style="{backgroundColor: getBackColor(row.visitUv['1'])}">{{row.visitUv["1"]}}</td>
                <td class="table_cell th" :style="{backgroundColor: getBackColor(row.visitUv['2'])}">{{row.visitUv["2"]}}</td>
                <td class="table_cell th" :style="{backgroundColor: getBackColor(row.visitUv['3'])}">{{row.visitUv["3"]}}</td>
                <td class="table_cell th" :style="{backgroundColor: getBackColor(row.visitUv['4'])}">{{row.visitUv["4"]}}</td>
                <td class="table_cell th" :style="{backgroundColor: getBackColor(row.visitUv['5'])}">{{row.visitUv["5"]}}</td>
                <td class="table_cell th" :style="{backgroundColor: getBackColor(row.visitUv['6'])}">{{row.visitUv["6"]}}</td>
                <td class="table_cell th" :style="{backgroundColor: getBackColor(row.visitUv['7'])}">{{row.visitUv["7"]}}</td>
                <td class="table_cell th" :style="{backgroundColor: getBackColor(row.visitUv['14'])}">{{row.visitUv["14"]}}</td>
                <td class="table_cell th" :style="{backgroundColor: getBackColor(row.visitUv['30'])}">{{row.visitUv["30"]}}</td>
              </template>
            </tr>
          </tbody>
        </table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    data() {
      return {
        searchForm: {
          queryDate: [],
          period: 'daily',
          retain: 'active'
        },
        loading: false,
        chartData: [],
        tongjiRetain: [
          {
            label: "新增留存",
            value: 'newly'
          },
          {
            label: "活跃留存",
            value: 'active'
          }
        ],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > moment().subtract(1, 'days');
          },
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = moment().subtract(1, 'days');
              picker.$emit('pick', [moment(end).subtract(7, 'days'), end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = moment().subtract(1, 'days');
              picker.$emit('pick', [moment(end).subtract(1, 'months'), end]);
            }
          }]
        }
      }
    },
    mounted() {
      const end = moment().subtract(1, 'days');
      this.searchForm.queryDate = [moment(end).subtract(1, 'months'), end]
      this.query()
    },
    methods: {
      getBackColor(val){
        if(val === undefined || val === null){
          return '';
        }
        if(val > 0) {
          return 'rgb(122, 209, 122)'
        }
        return 'rgb(233, 242, 232)'
      },
      query() {
        this.loading = true
        var url = "/wx/getDailyRetainInfo"
        if (this.searchForm.period === 'weekly') {
          url = "/wx/getWeeklyRetainInfo"
        } else if (this.searchForm.period === 'monthly') {
          url = "/wx/getMonthlyRetainInfo"
        }
        this.$http({
          url: url,
          method: 'get',
          params: {
            'beginDate': moment(this.searchForm.queryDate[0]).format("YYYY-MM-DD"),
            'endDate': moment(this.searchForm.queryDate[1]).format("YYYY-MM-DD")
          }
        }).then(({
          data
        }) => {
          this.loading = false
          this.chartData = []
          if (data && data.success) {
            this.chartData = (data.data || []).reverse()
          }
        })
      }
    }
  }
</script>
<style scoped="scoped">
  .table {
    width: 100%;
    font-size: 14px;
    background-color: #ffffff;
    text-align: center;
    border-top: 1px solid #e7e7eb;
    border-bottom: 1px solid #e7e7eb;
    border-spacing: 0;
    font-size: 14px;
    font-weight: normal;
  }
  .thead {
    background-color: #f6f8f9;
    border-radius: 8px 8px 0 0;
    position: relative;
    z-index: 1;
    color: #7e8081;

  }
  .thead .table_cell:first-child {
    border-left-width: 0;
  }
  .table_cell:first-child {
    text-align: left;
    padding-left: 40px;
  }
  .thead .table_cell {
    line-height: 60px;
    border-bottom: none;
    font-weight: normal;
  }
  .tbody .table_cell {
    height: 52px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: none;
    border-bottom: 1px solid #e7e7eb;
    word-wrap: break-word;
    word-break: break-all;
    padding-right: 5px;
    font-weight: normal;
    color: #353535;
  }
</style>
